import React, { Component } from 'react';
import {BrowserRouter as Router, Route,NavLink} from 'react-router-dom';
// import {HashRouter as Router, Route, Link,NavLink} from 'react-router-dom';


import ContentNow from "./contentNow.js";
import ContentWill from "./contentWill.js";
import $ from "jquery";
import "../css/film.css";
import {connect} from "react-redux";

class Films extends Component {
  componentDidMount(){
    this.props.changeTitle("卖座电影");
    this.scrollFun();
  }
  scrollFun(){
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    var container = $(this.refs.tabBox);
    var tabTitleHeight = $(this.refs.tabTitle).height()+1;
    var content = $('.content');
    console.log(typeof tabTitleHeight);
    console.log("this.scrollTop:  "+this.scrollTop);
    console.log("clientHeight:"+clientHeight);
    container.on("scroll",function(){
       console.log(this+"被滚了:"+(parseInt(content.height())+parseInt(tabTitleHeight))+"   我自己的高度为："+this.clientHeight)
      
    })
  }

  
  render() { 
    return (
          <div className="components tabBox" ref="tabBox">
              <div className="tab" ref="tabTitle">
                  <NavLink activeClassName="active" to="/film/now_playing" ><p>正在热映</p></NavLink>
                  <NavLink activeClassName="active" to="/film/will_playing"><p>即将上映</p></NavLink>
              </div>
            
              <Route  path="/film/now_playing" component={ContentNow}/>
              <Route  path="/film/will_playing" component={ContentWill}/>
          </div>
    );
  }
  
}

var Film = connect(
  function(state, ownProps) {
    return {
          
    }
  },
  function(dispatch, ownProps) {
   return {
      changeTitle:function(data){
          dispatch({
                type:"CHANGETITLE",
                title:data
          })
      }
   }
  }
)(Films);

export default Film;
